<template>
    <div class="testView03 full-body">
        <!-- <g-carousel>
            <div>
                <img src="../assets/img/002.jpg" />
            </div>
            <div>
                <img src="../assets/img/003.png" />
            </div>
            <div>
                <img src="../assets/img/004.png" />
            </div>
        </g-carousel> -->
        <button class="btn_sm default_btn" @click="add(10)">加上10%</button>
        <button class="btn_sm default_btn" @click="remove(10)">减去10%</button>
        <g-progress :value="val" text="out"></g-progress>
        <g-progress :value="val" type="success"></g-progress>
        <g-progress :value="val" type="warning"></g-progress>
        <g-progress :value="val" type="error"></g-progress>

        <button class="btn default_btn" @click="emptyJump">empty弹窗</button>
        <button class="btn default_btn" @click="emptyJump2">empty弹窗2</button>
        
        <g-empty-pop ref="empty_pop" width="70%" maxHeight="80vh">
            <h1>hello</h1>
            <h1>hello</h1>
            
        </g-empty-pop>
        <g-empty-pop ref="empty_pop2">
            <h1>hello2</h1>
        </g-empty-pop>

        <g-table class="table" v-if="table_data != null" :table_data="table_data"></g-table>

        <div>----------------------------------------------------------------------------------------------------------------------------------------------</div>
        <g-form ref="gForm" :id="'materiaForm'">
            <g-label  class="grid-row-1">
                <div class="g_f_pop_title">名称</div>
                <div class="g_f_pop_content">
                    <input type="text" class="form_label inp input-10"  name="menuName">
                </div>
            </g-label>
            <g-label  class="grid-row-1">
                <div class="g_f_pop_title">材料</div>
                <div class="g_f_pop_content">
                    <input type="text" class="form_label inp input-10"  name="mageria">
                </div>
            </g-label>
            <g-label  class="grid-row-1">
                <div class="g_f_pop_title">图片</div>
                <div class="g_f_pop_content">
                    <div class="upload_div">
                        <img class="show_img" :src="imageBaseData">
                        <input type="file" name="img" class="file_input form_label inp input-10" accept="image/png, image/jpeg" multiple required ref="materiaImg" @change="lisentChange">
                    </div>
                </div>
            </g-label>
            
        </g-form>
        <button class="btn primary_btn" @click="saveMateria">提交</button>
        <div>---------------------------------------------------------------------------------------------------------------------------------------------</div>
    </div>
</template>
<script>
import {ref,getCurrentInstance} from 'vue';
export default{
    name:'testView03',
    setup(props){
        let val = ref(10);
        let empty_pop = ref(null);
        let empty_pop2 = ref(null);

        let imageBaseData = ref(null);
        let gForm = ref(null);

        let saveMateria = ()=>{
            let data = gForm.value.getFormData();
            console.log(data)
        }
        
        let add = (temp)=>{
            if(val.value <100){
                val.value = val.value+temp;
            }
            
        }

        let remove = (temp)=>{
            if(val.value > 0){
                val.value = val.value-temp;
            }
        }

        let empty_pop_data = {
            title:'hello',
            confirm:false,
            opera:{
                cancel:{
                    text:'取消',
                    callOff:function(change){
                        change(empty_pop_data);
                    }
                },
                next:{
                    text:'确定',
                    success:function(change){
                        console.log("你点击了确定");
                        change(empty_pop_data);
                    }
                }
            },
        };
        let emptyJump = ()=>{
            empty_pop.value.change(empty_pop_data);
        }
        let empty_pop_data2 = {
            title:'hello',
            confirm:true,
            opera:{
                cancel:{
                    text:'取消',
                },
                next:{
                    text:'确定',
                    success:function(change){
                        console.log("你点击了确定");
                        change(empty_pop_data);
                    }
                }
            },
        };
        let emptyJump2 = ()=>{
            empty_pop.value.change(empty_pop_data);
        }

        let table_data = ref({
            // 顶部操作区（左）
            left_opera:[
                {
                // 按钮文本
                text:'添加',
                // 按钮样式
                class:'btn_sm primary_btn',
                // 按钮触发的回调函数
                fun:function(){
                    console.log('你点了添加');
                }
                },
                {
                // 按钮文本
                text:'导出',
                // 按钮样式
                class:'btn_sm secondary_btn',
                // 按钮触发的回调函数
                fun:function(){
                    console.log("你惦记了导出");
                }
                }
            ],
            // 表头
            column : [
                {label:'ID',prop:'id',visible:true},
                {label:'姓名',prop:'name',visible:true,text_align:'left'},
                {label:'年龄',prop:'age',visible:true,text_align:'right'},
                {label:'性别',prop:'sex',visible:true,text_align:'left'},
                {label:'地址',prop:'addr',visible:true,text_align:'left'},
                {label:'图片',prop:'img',visible:true,text_align:'center',img:true}
            ],
            // 表数据
            data:[
                {addr:'jiangxisheng',name:'zhangsan',id:1,age:34,sex:'男',img:require('D:/Users/GJHQQ/Desktop/2023-07-17/123.png')},
                {name:'wangwu',addr:'hubeisheng',age:32,id:2,sex:'男'},
                {name:'paohui',id:3,addr:'hunansheng',age:64,sex:'女'},
                {name:'mazi',id:4,addr:'nanchangshi',age:33,sex:'男'},
                ],
            // 操作区域数据
            operation : [
                {
                // 按钮文本
                text:'添加',
                // 按钮样式
                class:'btn_sm primary_btn_nobg',
                style:{border:'none','margin-left':'0','margin-right':'0'},
                // 按钮触发的回调函数
                fun:function(item){
                    console.log(item);
                }
                },
                {
                text:'移除',
                class:'btn_sm error_btn_nobg',
                style:{border:'none','margin-left':'0','margin-right':'0'},
                fun:function(item){
                    console.log(item);
                }
                }
            ],
            moreOpera:[
                {text:'oper11111',fun:function(item){console.log(item);}},
                {text:'oper222222',fun:function(item){console.log(item);}},
                {text:'oper3333333',fun:function(item){console.log(item);}}
            ]
            });
        
        return {
            emptyJump,
            emptyJump2,
            val,
            add,
            remove,
            empty_pop_data,
            empty_pop_data2,
            empty_pop,
            empty_pop2,
            table_data,
            gForm,
            saveMateria,
            imageBaseData
        }
    }
    
}
</script>
<style>
    progress{
        border-radius: 0;
        background: #f8f9fa;
    }

</style>